<template>
  <div class="sector">
    <el-table
      :data="userData.users"
      style="width: 100%"
      :default-sort="{prop: 'account', order: 'descending'}"
    >
      <el-table-column label="头像" width="100px">
        <template slot-scope="scope">
          <img width="50" v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl" alt />
          <img width="50" v-else src="http://localhost:3000/images/default.jpg" alt />
        </template>
      </el-table-column>
      <el-table-column label="账户名" sortable prop="account"></el-table-column>
      <el-table-column label="昵称" sortable prop="nickName"></el-table-column>
      <el-table-column label="身份" sortable prop="permission">
        <template slot-scope="scope">
          <template v-if="scope.row.permission ==0">
            <span style="color:gray">已停用</span>
          </template>
          <template v-if="scope.row.permission ==1">
            <span style="color:cornflowerblue">管理员</span>
          </template>
          <template v-if="scope.row.permission ==5">
            <span style="color:teal">销售员</span>
          </template>
          <template v-if="scope.row.permission ==9">
            <span style="color:red">超级狗管理</span>
          </template>
        </template>
      </el-table-column>

      <el-table-column width="300px" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showClientByID(scope.row._id)">名下客户</el-button>
          <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
          <el-popconfirm title="确认停用该用户？" @onConfirm="deltrigger(scope.row._id)">
            <el-button class="delbutton" size="mini" type="danger" slot="reference">停用</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="userData.currentPage"
      :page-sizes="[3,5,7, 10]"
      :page-size="userData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userData.total"
    ></el-pagination>

    <!-- 弹出对话框显示该销售名下所有客户 -->

    <el-dialog title="名下所有客户" :visible.sync="dialogTableVisible">
      <el-table :data="gotClients">
        <el-table-column property="nickName" label="姓名"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            <template v-if="scope.row.gender ==0">
              <span>女</span>
            </template>
            <template v-if="scope.row.gender ==1">
              <span>男</span>
            </template>
            <template v-if="scope.row.gender ==2">
              <span>未知</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column property="insureOrdList.length" label="保险订单数量"></el-table-column>
        <el-table-column property="claimOrdList.length" label="理赔订单数量"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 弹出对话框修改该销售信息 -->

    <el-dialog title="修改信息" :visible.sync="changeDialogVisible">
      <el-form :model="changeUserData">
        <el-form-item label="账户名" :label-width="formLabelWidth">
          <el-input v-model="changeUserData.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="changeUserData.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="changeUserData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-radio-group v-model="changeUserData.permission">
            <el-radio border v-model="changeUserData.permission" label="0">禁用</el-radio>
            <el-radio border v-model="changeUserData.permission" label="1">管理员</el-radio>
            <el-radio border v-model="changeUserData.permission" label="5">销售员</el-radio>
            <el-radio border v-model="changeUserData.permission" label="9">超级管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/admin/uploadUserAvatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="changeUserData.avatarUrl!='default.jpg'"
              :src="'http://localhost:3000/temp/'+changeUserData.avatarUrl"
              :onerror="defaultImage"
              class="avatar"
              alt="点击上传头像"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers("admin");
const { mapMutations: publicMutations } = createNamespacedHelpers(
  "publicStore"
);
export default {
  created() {
    this.getUsers();
    this.setNowBreadcrumb("userslist");
  },
  data() {
    return {
      changeUserData: {
        _id: "",
        account: "",
        avatarUrl: "",
        age: "",
        nickName: "",
        permission: 0,
      },
      gotClients: [
        {
          account: "",
          gender: 1,
          nickName: "",
        },
      ],
      formLabelWidth: "120px",
      dialogTableVisible: false,
      changeDialogVisible: false,
      headers: {
        Authorization: "Bearer " + localStorage.token,
      },
      defaultImage:'this.src="http://localhost:3000/images/default.jpg"'
    };
  },
  computed: {
    ...mapState(["userData"]),
  },
  methods: {
    ...mapActions(["getUsers", "delUser", "getClients", "modUser"]),
    ...mapMutations([
      "changePageSize",
      "changePageSize",
      "nextPage",
      "changeCurrentPage",
    ]),
    ...publicMutations(["setNowBreadcrumb"]),
    handleEdit(selectedUser) {
      this.changeDialogVisible = true;
      this.changeUserData = selectedUser;
      // console.info(this.changeUserData);
    },
    cancelEdit() {
      this.changeDialogVisible = false;
      this.getUsers();
    },
    async confirmEdit() {
      this.changeDialogVisible = false;
      let result = await this.modUser(this.changeUserData);
      if (result.status) {
        this.$notify({
          title: "提示",
          message: "修改成功",
        });
        this.getUsers();
      } else {
        this.$notify({
          title: "提示",
          message: "修改失败",
        });
        this.getUsers();
      }
    },
    handleSizeChange(val) {
      this.changePageSize(val);
      this.getUsers();
    },
    handleCurrentChange(val) {
      this.changeCurrentPage(val);
      this.getUsers();
    },
    handleAvatarSuccess(res, file) {
      if (res.status) {
        this.changeUserData.avatarUrl = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPGorPNG =
        file.type === "image/jpeg" || file.type === "image/png";
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isJPGorPNG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt20M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isJPGorPNG && isLt20M;
    },
    async deltrigger(_id) {
      // console.info("triggered delete " + _id);
      let result = await this.delUser(_id);
      if (result.status) {
        this.$notify({
          title: "提示",
          message: "删除成功",
        });
        this.getUsers();
      } else {
        this.$notify({
          title: "提示",
          message: "删除失败",
        });
        this.getUsers();
      }
      this.getUsers();
    },
    async showClientByID(_id) {
      this.dialogTableVisible = true;
      let result = await this.getClients(_id);
      // console.info(result.gotClients);
      this.gotClients = result.gotClients;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/public/sector.scss";

.delbutton {
  margin-left: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
